<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>Proxy</title>
    </head>
    <body>
        <h3>使用Proxy实现简单的双向绑定</h3>
        <p>使用原生JavaScript实现简单的双向绑定</p>

        <div>
            <input type="text">
            <p></p>
        </div>

        <script type="text/javascript">

            // 使用标签选择器选择页面上惟一的 input 元素
            const input = document.querySelector( "input" );
            // 使用标签选择器选择页面上惟一的 p 元素
            const p = document.querySelector( "p:last-child" );

            // 代理目标(谁被别人代理谁就是代理目标)
            const target = {
                message: ''
            }

            const handler = {
                set: function(target, property, value, receiver){
                    console.log( `为${property}属性赋值${value}` );
                    // 为代理目标(target)的指定属性(property)赋值(value)
                    target[ property ] = value ;
                    // 将代理目标中指定属性的值显示到页面上
                    p.innerHTML = target[ property ] ;
                    input.value = target[ property ] ;
                    console.log( target );
                }
            }
            // 代理对象(谁代理别人谁就是代理对象)
            const proxy = new Proxy( target , handler );
            //console.log( target );
            //proxy.message = "hello";
            //console.log( target );

            const inputListener = function(e){
                // 获得事件目标(即发生事件的元素)
                let t = e.target ;
                proxy.message = t.value ;
            }

            // 指定输入框的输入事件对应的事件监听器
            input.addEventListener( "input" , inputListener , true );
        </script>
        
    </body>
</html>